<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <header class="header">
    <h1>小黑记事本</h1>
    <input v-model="name" placeholder="请输入任务" class="new-todo" />
    <button class="add" @click="add">添加任务</button>
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <!-- v-for打头写，不要写到属性列表的后面 -->
      <li v-for="item, index in list" :key="item.id" class="todo">
        <div class="view">
          <span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label>
          <button class="destroy" @click="del(item.id)"></button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer v-show="list.length > 0" class="footer">
    <!-- 统计 -->
    <span class="todo-count">合 计:<strong> {{ list.length }} </strong></span>
    <!-- 清空 -->
    <button class="clear-completed" @click="list = []">
      清空任务
    </button>
  </footer>
</section>

<!-- 底部 -->
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      name: '',
      list: [
        // id不用做展示，仅供:key使用
        { id: 1, name: '跑步锻炼20分钟' },
        { id: 2, name: '复习数组语法' },
      ]
    },
    methods: {
      add() {

        if (this.name.trim() === '') return alert('请输入任务名称')

        // 提取所有的id
        const ids = this.list.map(v => v.id)
        // 得到下一个id
        const nextId = Math.max(0, ...ids) + 1
        // 拼凑对象
        const obj = { id: nextId, name: this.name }
        this.list.unshift(obj)

        // 重置输入框的值
        this.name = ''
      },
      del(id) {
        this.list = this.list.filter(v => v.id !== id)
      }
    }
  })

</script>
</body>
</html>
